<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
        /* 
            将所有的段落设置为红色


            元素选择器
                作用: 根据标签名来选中指定的元素
                语法: 标签名 {}
                例子: p{} h1{} div{}

        */
        
        /* p {
            color: red;
        }

        h1 {
            color: gold;
        } */


        /* 
            只讲儿童相见不相识变为红色

            id选择器
                作用: 根据元素的id属性值选中一个元素
                语法: #id属性值
                例子: #box{} #red{}

        */
        /* #red {
            color: red;
        } */

        /* 
            将秋水...和落霞...设置为蓝色

            类选择器
                作用: 根据元素的class属性值来选中一组元素
                语法: .class属性值{}

        */
        .blue {
            color: blue;
        }

        .abc {
            font-size: 20px;
        }


        /* 
            通配选择器
                作用: 选中页面中的所有元素
                语法: *
        */
        * {
            color: red;
        }

    </style>
    </head>
    <body>
        <h1 class="blue abc">我是标题</h1>
        <p>少小离家老大回</p>
        <p>乡音无改鬓毛衰</p>
        <!-- 每个标签元素都可以指定id,但是id的值是不能重复的
        因为不单单css会调用id,js也会调用id,所以这时候需要精准调用
    -->
        <p id="red">儿童相见不相识</p>
        <p>笑问客从何处来</p>
        <!-- 
        class是一个标签的属性,它和id类似
        不同的是,class可以重复使用,重复命名
        可以通过class属性来为元素分组
        而且,可以为一个元素,指定多个class
     -->
        <p class="blue">秋水共长天一色</p>
        <p class="blue">落霞与孤鹜齐飞</p>
    </body>
</html>